<template>
  <fieldset class="soncom">
    <legend>子组件</legend>
    <p>父组件传递过来的数据是：{{msg}}</p>
    <ul>
        <li v-for="item in list" :key="item">{{item}}</li>
    </ul>
  </fieldset>
</template>

<script setup>
import { reactive, ref, watch } from "vue";
const Obj = defineProps(['sondata'])
let msg = ref('')
let list = reactive([])
// props自定义属性根据传递的值发生更新（自动）
watch(Obj.sondata,(newVal)=>{
    if (newVal.msg != '')msg.value = newVal.msg;
    if (newVal.uname != '') {
         list.push({
        uname:newVal.uname,
        upwd : newVal.upwd
    }) 
    } 
},{Immediate:true} )
    

</script>

<style scoped>
.soncom ul{
    list-style: none;
    width: 100%;
    height: 250px;
    display: block;
}
.soncom ul li{
    width: 100%;
    color: orangered;
}
</style>